<template>
    <div class="white-box">
        <title-more title="基本信息" />
        <div class="od-one">
            <div class="od-one__item">
                <detail-item title="供应商名称" one-value bottom="16px" :value="objs.title" />
                <detail-item title="当前余额" one-value bottom="16px" :value="objs.money || '0.00'" price-icon />
                <detail-item title="最低担保金" one-value bottom="16px" :value="objs.min_danbao || '0.00'" price-icon />
                <detail-item title="标签" one-value bottom="16px" :value="objs.tag_value" />
            </div>
            <div class="od-one__item">
                <detail-item title="供应商ID" one-value bottom="16px" :value="objs.supplier_id" />
                <detail-item title="总收益" one-value bottom="16px" :value="objs.total_money || '0.00'" price-icon />
                <detail-item title="已提现" one-value bottom="16px" :value="objs.tixian_money || '0.00'" price-icon />
            </div>
            <div class="od-one__item">
                <detail-item title="手机号" one-value bottom="16px" :value="objs.mobile" />
                <detail-item title="担保金" one-value bottom="16px" :value="objs.danbao || '0.00'" price-icon />
                <detail-item title="佣金百分比" one-value bottom="16px" :value="objs.award_percent + '%'" />
            </div>
        </div>
        <title-more title="财务明细" />
        <el-tabs v-model="tabName" type="card" @tab-click="clickTab">
            <el-tab-pane label="待结算" name="0">
                <el-table
                    class="table-mb"
                    :data="waitArrs"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                    v-loading="table_loading"
                >
                    <el-table-column prop="order_sn" label="订单编号"></el-table-column>
                    <el-table-column prop="supplier_num" label="数量"></el-table-column>
                    <el-table-column prop="cost_price" label="待结算金额"></el-table-column>
                    <el-table-column prop="created_at_label" label="下单时间"></el-table-column>
                </el-table>
                <el-pagination background v-model:current-page="wait_page" :page-size="20" :total="wait_total" layout="total, prev, pager, next, jumper">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="可提现" name="1">
                <el-table
                    class="table-mb"
                    :data="balanceArrs"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                    v-loading="table_loading"
                >
                    <el-table-column prop="old_val" label="变动前"></el-table-column>
                    <el-table-column prop="number" label="变动金额"></el-table-column>
                    <el-table-column prop="val" label="变动后"></el-table-column>
                    <el-table-column prop="type_label" label="类型"></el-table-column>
                    <el-table-column prop="created_at_label" label="创建时间"></el-table-column>
                    <el-table-column prop="intro" label="备注"></el-table-column>
                </el-table>
                <el-pagination background v-model:current-page="balance_page" :page-size="20" :total="balance_total" layout="total, prev, pager, next, jumper">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="保证金记录" name="2">
                <el-table
                    class="table-mb"
                    :data="bondArrs"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                    v-loading="table_loading"
                >
                    <el-table-column label="变动来源" min-width="120">
                        <template #default="{ row }">{{ row.from === "money" ? "余额" : "线下收款" }}</template>
                    </el-table-column>
                    <el-table-column label="变动类型" min-width="120">
                        <template #default="{ row }">{{ row.type == 1 ? "增加" : "减少" }}</template>
                    </el-table-column>
                    <el-table-column prop="old_danbao" label="原保证金额" min-width="120"></el-table-column>
                    <el-table-column prop="number" label="变动金额" min-width="120"></el-table-column>
                    <el-table-column prop="danbao" label="现保证金额" min-width="120"></el-table-column>
                    <el-table-column prop="note" label="变动原因" min-width="280"></el-table-column>
                    <el-table-column prop="created_at_label" label="变动时间" width="160"></el-table-column>
                    <el-table-column label="操作" width="90" class-name="operation-nav" fixed="right">
                        <template #default="{ row }">
                            <el-button link type="primary" class="theme-btn" @click="clickDetail(row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background v-model:current-page="bond_page" :page-size="20" :total="bond_total" layout="total, prev, pager, next, jumper">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>

        <!-- 详情 -->
        <el-drawer
            title="查看详情"
            v-model="drawerDetail"
            direction="rtl"
            size="530px"
            :append-to-body="true"
            :destroy-on-close="true"
            @close="drawerDetail = false"
        >
            <div class="xq-box">
                <detail-item title="供应商ID" :value="objsBond.supplier_id" bottom="24px" />
                <detail-item title="变动来源" :value="objsBond.from === 'money' ? '余额' : '线下收款'" bottom="24px" />
                <detail-item title="变动类型" :value="objsBond.type == 1 ? '增加' : '减少'" bottom="24px" />
                <detail-item title="原保证金额" :value="objsBond.old_danbao" bottom="24px" />
                <detail-item title="变动金额" :value="objsBond.number" bottom="24px" />
                <detail-item title="现保证金额" :value="objsBond.danbao" bottom="24px" />
                <detail-item title="变动原因" :value="objsBond.note" bottom="24px" />
                <detail-item title="变动时间" :value="objsBond.created_at_label" bottom="24px" />
                <detail-item title="凭证图片" bottom="24px">
                    <div class="img-list" v-if="objsBond.have_photo == 1">
                        <div class="img-selects" v-for="(item, index) in objsBond.photos" :key="index">
                            <el-image
                                class="img-selects__pic"
                                :src="proxy.imgUrl + item + '!img_400'"
                                :preview-src-list="srcBondList"
                                :initial-index="index"
                                fit="cover"
                            />
                        </div>
                    </div>
                </detail-item>
            </div>
        </el-drawer>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { useRoute } from "vue-router"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue"
import DetailItem from "@components/DetailItem.vue"

const route = useRoute()
const { proxy } = getCurrentInstance()

let sid = route.query.sid
onMounted(() => {
    sid && getDetail()
})

const objs = ref({})
const typeArrs = ref([
    {
        loading: true,
        type: "order_under",
    },
    {
        loading: true,
        type: "money",
    },
    {
        loading: true,
        type: "danbao",
    },
])
function getDetail() {
    proxy.$axios
        .get("supplier/detail", {
            params: {
                type: "detail",
                supplier_id: sid,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                objs.value = res.data.data
                getWaitMoney()
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

const tabName = ref("0")
const clickTab = (pane) => {
    tabName.value = pane.index
    typeArrs.value[tabName.value].loading && getPublic()
}
function getPublic() {
    tabName.value == 0 && getWaitMoney()
    tabName.value == 1 && getBalance()
    tabName.value == 2 && getBonds()
}

/**
 * 待结算
 * @param {Boolean} table_loading 加载
 * @param {Number} wait_page 页码
 * @param {Number} wait_total 总数
 * @param {Array} waitArrs 数据
 */
const table_loading = ref(false)
const wait_page = ref(1)
const wait_total = ref(0)
const waitArrs = ref([])
watch(wait_page, (val) => {
    waitArrs.value = []
    getWaitMoney()
})
function getWaitMoney() {
    table_loading.value = true
    proxy.$axios
        .get("supplier/detail", {
            params: {
                page: wait_page.value,
                limit: 20,
                supplier_id: sid,
                type: typeArrs.value[0].type,
            },
        })
        .then((res) => {
            table_loading.value = false
            typeArrs.value[0].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                wait_total.value = res.data.count
                waitArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            table_loading.value = false
        })
}

/**
 * 可提现
 * @param {Number} balance_page 页码
 * @param {Number} balance_total 总数
 * @param {Array} balanceArrs 数组
 */
const balance_page = ref(1)
const balance_total = ref(0)
const balanceArrs = ref([])
watch(balance_page, (val) => {
    balanceArrs.value = []
    getBalance()
})
function getBalance() {
    table_loading.value = true
    proxy.$axios
        .get("supplier/detail", {
            params: {
                page: balance_page.value,
                limit: 20,
                supplier_id: sid,
                type: typeArrs.value[1].type,
            },
        })
        .then((res) => {
            table_loading.value = false
            typeArrs.value[1].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                balance_total.value = res.data.count
                balanceArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            table_loading.value = false
        })
}

/**
 * 保证金记录
 * @param {Number} bond_page 页码
 * @param {Number} bond_total 总数
 * @param {Array} bondArrs 数组
 */
const bond_page = ref(1)
const bond_total = ref(0)
const bondArrs = ref([])
watch(balance_page, (val) => {
    bondArrs.value = []
    getBonds()
})
function getBonds() {
    table_loading.value = true
    proxy.$axios
        .get("supplier/detail", {
            params: {
                page: bond_page.value,
                limit: 20,
                supplier_id: sid,
                type: typeArrs.value[2].type,
            },
        })
        .then((res) => {
            table_loading.value = false
            typeArrs.value[2].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                bond_total.value = res.data.count
                bondArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            table_loading.value = false
        })
}

/**
 * 保证金详情
 * @param {Object} objs 详情
 * @param {Boolean} drawerDetail 弹窗状态
 * @param {Array} srcBondList 图片预览
 */
const objsBond = ref({})
const srcBondList = ref([])
const drawerDetail = ref(false)
const clickDetail = (row) => {
    drawerDetail.value = true
    getBondDetail(row.danbao_id)
}
function getBondDetail(id) {
    proxy.$axios
        .get("supplier/danbao/detail", {
            params: {
                danbao_id: id,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                if (result.have_photo == 1) {
                    for (let i = 0; i < result.photos.length; i++) {
                        srcBondList.value.push(proxy.imgUrl + result.photos[i])
                    }
                }
                objsBond.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}
</script>

<script>
export default {
    name: "SupplierFinance",
}
</script>

<style lang="less" scoped>
:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }
    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;
        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}
.od-one {
    display: flex;
    margin-top: @margin-md;
    margin-bottom: @margin-mdl;
    .od-one__item {
        flex: none;
        width: 33.33%;
        p {
            width: 100%;
            margin-bottom: @margin-sm;
            font-size: @font-size-md;
            color: @gray-8;
            .price-icon {
                font-size: @font-size-sm;
            }
        }
    }
}
</style>
